スタイルシート 4
■ スタイルシート Part.4
前回は、テーブルの枠の色を徐々に変えてみました。
今回は、もっと特殊な枠を作ってみます。
枠に濃い影をつける
groove
<table width="300" height="50" style="border:10px groove #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>
|
枠に薄い影をつける
ridge
<table width="300" height="50" style="border:10px ridge #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>
|
枠を立体的に(へこませる)
inset
<table width="300" height="50" style="border:6px inset #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>
|
枠を立体的に(でっぱらせる)
outset
<table width="300" height="50" style="border:6px outset #c0c0c0;">
<tr><td>ここに文章や画像をいれます</td></tr></table>
|
このように、スタイルシートをテーブルに組み合わせることによって、
枠のバリエーションを一気に増やすことができました。
次回は、テーブルの背景をグラデーションにする方法です。
|